
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>留言系统</title>
    <link rel="stylesheet" type="text/css" href="css/message.css">
    <script src="js/message.js"></script>
</head>
<body>
<div class="container">
    <h2 class="title">重人科留言系统</h2>

    <div class="message-list" id="messageList">
        <!--        留言列表item布局如下，生成的时候按照这样的格式生成item-->
        <!--        <div class="message">-->
        <!--            <div class="username">用户A</div>-->
        <!--            <div class="timestamp">2024-10-13 14:30</div>-->
        <!--            <div class="content">这是一条留言内容。</div>-->
        <!--        </div>-->

        <!--  Jsp + EL + JSTL 方式       -->
<!--        <c:forEach var="item" items="${messages}">-->
<!--                <div class="message">-->
<!--                    <div class="username">${item.username}</div>-->
<!--                    <div class="timestamp">${item.timeStr}</div>-->
<!--                    <div class="content">${item.message}</div>-->
<!--                </div>-->
<!--        </c:forEach>-->

            <!--  thymeleaf       -->
            <div th:each="item : ${messages}" class="message">
                <div class="username" th:text="${item.username}"></div>
                <div class="timestamp" th:text="${item.timeStr}" ></div>
                <div class="content" th:text="${item.message}"></div>
                <hr>
            </div>


    </div>

    <h3>发布留言</h3>
    <form action="sendMessage" method="post">
        <div class="input-group">
            <textarea id="message" name="message" rows="4" placeholder="请输入留言内容" required></textarea>
        </div>
<!--   <button type="submit" class="submit-button" onclick="addMessage()">发布留言</button>-->
        <input type="submit" value="发布留言"/>
    </form>
</div>
</body>
</html>